<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="createForm">
      <el-form-item
        label="原厂"
        prop="factory">
        <el-input
          v-model="form.factory"
          placeholder="请输入原厂"/>
      </el-form-item>
      <el-form-item
        label="经销商"
        prop="distributor">
        <el-input
          v-model="form.distributor"
          placeholder="请输入经销商"/>
      </el-form-item>
      <el-form-item
        label="培训结果"
        prop="trainResult">
        <el-select
          v-model="form.trainResult"
          placeholder="请选择">
          <el-option
            v-for="item in trainResultOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="培训类型"
        prop="trainType">
        <el-select
          v-model="form.trainType"
          placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="通过时间"
        class="trainDataPicker"
        prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="开始日期"/>
      </el-form-item>
      <el-form-item
        label="培训用户"
        prop="trainUser">
        <el-input
          v-model="form.trainUser"
          placeholder="请输入培训用户"/>
      </el-form-item>
      <el-form-item
        label="培训证明"
        prop="imageUrl">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img
            v-if="form.imageUrl"
            :src="form.imageUrl"
            class="avatar">
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>

    </el-form>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CreateTrain',
  data () {
    return {
      form: {
        factory: '',
        distributor: '',
        trainResult: '',
        trainType: '',
        startTime: '',
        trainUser: '',
        imageUrl: ''
      },
      options: [{
        value: '药品知识培训',
        label: '药品知识培训'
      }, {
        value: '政策知识培训',
        label: '政策知识培训'
      }],
      trainResultOptions: [{
        value: '通过',
        label: '通过'
      }, {
        value: '未通过',
        label: '未通过'
      }]

    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

  }
}
</script>

<style lang="less" scoped>
  .add-new {
    width: 74px;
    height: 34px;
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    cursor: pointer;
    margin: 4px 0 20px 0;
  }

  .avatar-uploader {
    width: 60px;
    height: 60px;
    border: 1px dashed #d9d9d9;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
</style>
